<template>
  <div id="app">
    <router-view />
    <playerList />
    <audioPlayer />
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import audioPlayer from '@/components/audioPlayer/index.vue';
import playerList from '@/components/audioPlayer/list.vue';

export default {
    components: {
        audioPlayer,
        playerList,
    },
    created() {
        window.addEventListener('scroll', this.gloablScrollAction, { passive: true });
        this.scrollUpdateAction(this.bgAnimation());
        this.getClientOptionsAction(); // 获取全局配置
    },
    destroyed() {
        window.removeEventListener('scroll', this.gloablScrollAction, { passive: true });
    },
    methods: {
        ...mapActions('app', ['getClientOptionsAction', 'gloablScrollAction', 'scrollUpdateAction']),
        bgAnimation() {
            let playable = true;
            const scroll = (scrollY = 0) => {
                if (!playable) return;
                requestAnimationFrame(() => {
                    document.body.style.backgroundPositionY = `${Math.ceil(scrollY / 10)}px`;
                    playable = true;
                });
                playable = false;
            };
            return scroll;
        },
    },
};
</script>

<style>
.miva-wapper {
  min-height: 100vh;
}
</style>
